$(function() {
  let arr = ["阿迪", "耐克", "李宁", "乔丹", "匡威"];
  localStorage.setItem("search", JSON.stringify(arr));

  //1. 从本地获取数据并进行渲染
  function render() {
    var history = JSON.parse(localStorage.getItem("search")) || [];
    console.log(history);
    // 组合渲染
    $(".search-main").html(template("tmp", { list: history }));
  }
  render();
  // 2.清空历史
  // 点击清空按钮,弹出确认框,点击确定按钮,向后台发送请求,删除对应的内容.
  // 前端进行渲染.
  $(".search-main").on("click", ".history-clear", function() {
    mui.confirm("确定删除嘛", "警告", ["取消", "确定"], function(e) {
      if (e.index == 1) {
        localStorage.removeItem("search");
        render();
      }
    });
  });

  // 3.删除单个历史
  // 点击按钮,获取点击的下标,弹出确认框.
  // 点击确认,根据下标,删除对应的值.
  // 页面重新渲染
  $(".search-main").on("click", ".history-del", function() {
    var index = $(this).data("index");
    mui.confirm("确定删除嘛", "警告", ["取消", "确定"], function(e) {
      if (e.index == 1) {
        var arr = JSON.parse(localStorage.getItem("search"));
        arr.splice(index, 1);
        localStorage.setItem("search", JSON.stringify(arr));
        render();
      }
    });
  });

  // 4.添加历史记录
  // 点击搜索,获取输入框里面得关键字,判断是否为空,未空,不执行.
  // 不为空,添加到本地.
  // 添加完成,页面重新渲染.
  $(".search-btn").click(function() {
    var txt = $(".search-txt").val();
    if (txt.trim().length == 0) {
      mui.toast("请输入内容");
      return;
    }
    // 清空输入框
    $(".search-txt").val("");
    var arr = JSON.parse(localStorage.getItem("search"));
    // 添加之前判断是否有重复项,有删除.
    var index = arr.indexOf(txt);
    if (index > -1) {
      arr.splice(index, 1);
    }
    arr.unshift(txt);
    // 确保数组的长度为6
    if (arr.length > 6) {
      arr.pop();
    }
    localStorage.setItem("search", JSON.stringify(arr));
    render();
    // 根据输入的关键字进行对应的跳转.
    location.href = "./searchList.html?key=" + txt;
  });
});
